feat(material/menu): enhance menu item component with interactive disabled state #30730
Conversation
mistrykaran91
requested review from
crisbeto and
wagnermaciel
and removed request for
a team
angular-robot
bot
added
detected: feature
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
a61c264 to
90b1bf7
Compare
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
90b1bf7 to
fe167d5
Compare
src/material/menu/menu.scss
Outdated
| &[disabled] { | ||
| cursor: default; | ||
| opacity: 0.38; | ||
| pointer-events: none; |
There was a problem hiding this comment.
Why is this being added? The browser already prevents interaction with disabled elements.
There was a problem hiding this comment.
I had to include that like button-toggle.scss since, the tooltip would have been shown even if disabledInteractive was set to false.
There was a problem hiding this comment.
The point of disableInteractive is that the item should look disabled, but things like tooltips should still show up.
There was a problem hiding this comment.
Yes, I got that but the tooltip is displayed even when the disabledInteractive is set to false and I think it should be shown only in case of disabledInteractive being set to true. Similar to checkbox and radio, they do not display tooltip of disabledInteractive is set to false, Sorry if was bit unclear :)
There was a problem hiding this comment.
That shouldn't happen on button nodes. For anchors it's fine since the browser doesn't really have a concept of them being disabled.
There was a problem hiding this comment.
Ok, then I remove that style.
There was a problem hiding this comment.
@crisbeto If you see the below example, here also in disabled button with mat-tooltip and no disabledInteractive tooltip is not displayed. So, shouldn't menu button also be similar to this or the other way round.
https://material.angular.io/components/button/examples#button-disabled-interactive
Also, I see here also we have pointer-events:none
There was a problem hiding this comment.
Oh I see, its with ::after pseudo selector now. So, we close this or have it with the background color being different on disabledInteractive hover ?
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
2fccb47 to
80b9481
Compare
crisbeto
added
the
dev-app preview
|
Deployed dev-app for 36221d3 to: https://ng-dev-previews-comp--pr-angular-components-30730-dev-ry2lo0eh.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
80b9481 to
dc9498b
Compare
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
dc9498b to
93c0f60
Compare
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
93c0f60 to
cf09508
Compare
…abled state In menu-item component add an option `disabledInteractive` to interact with menu item in disabled state similar to `mat-button`, `mat-radio`, etc Fixes angular#29984
mistrykaran91
force-pushed
the
feat/add-disabledInteractive-option-for-mat-menu-item
branch
from
cf09508 to
36221d3
Compare
2 participants
In
menu-itemcomponent add an optiondisabledInteractiveto interact with menu item in disabled state similar tomat-button,mat-radio, etcFixes #29984